<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> ${serialNumber}、旅游用户趋势 </div>
<div style=" text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px;"> 截至目前，旅游用户数量变化趋势如下图所示： </div>
<div style="width: 1000px;margin: 16px auto;overflow: hidden;">
    <div style="float: left;font-size: 18px;font-weight: bold;">旅游用户趋势</div>
    <select id="tourist-area-id" style="float: right;padding: 5px;min-width: 100px;"></select>
</div>
<div id="my_echarts4" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图3 旅游用户数量变化趋势</div>
<div id="desc-tourist-trend" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;"></div>

<script>
    (function () {
        $("#tourist-area-id").change(function () {
            change()
        })

        /*var result4 = {
            "三沙市": [
                { "count": "16", "date": "2022-05-27" },
                { "count": "10", "date": "2022-06-01" },
                { "count": "4", "date": "2022-05-29" },
                { "count": "3", "date": "2022-05-30" },
                { "count": "3", "date": "2022-05-31" },
                { "count": "2", "date": "2022-05-28" }
            ],
            "昌江黎族自治县": [
                { "count": "512", "date": "2022-06-01" },
                { "count": "506", "date": "2022-05-29" },
                { "count": "487", "date": "2022-05-30" },
                { "count": "480", "date": "2022-05-27" },
                { "count": "464", "date": "2022-05-31" },
                { "count": "407", "date": "2022-05-28" }
            ],
            "临高县": [
                { "count": "214", "date": "2022-05-31" },
                { "count": "186", "date": "2022-05-30" },
                { "count": "173", "date": "2022-06-01" },
                { "count": "166", "date": "2022-05-27" },
                { "count": "138", "date": "2022-05-29" },
                { "count": "130", "date": "2022-05-28" }
            ],
            "龙华区": [
                { "count": "372", "date": "2022-05-30" },
                { "count": "332", "date": "2022-05-29" },
                { "count": "330", "date": "2022-06-01" },
                { "count": "324", "date": "2022-05-31" },
                { "count": "293", "date": "2022-05-27" },
                { "count": "141", "date": "2022-05-28" }
            ],
            "琼中黎族苗族自治县": [
                { "count": "40", "date": "2022-05-29" },
                { "count": "36", "date": "2022-05-30" },
                { "count": "36", "date": "2022-05-31" },
                { "count": "27", "date": "2022-05-27" },
                { "count": "27", "date": "2022-06-01" },
                { "count": "20", "date": "2022-05-28" }
            ],
            "屯昌县": [
                { "count": "229", "date": "2022-06-01" },
                { "count": "216", "date": "2022-05-30" },
                { "count": "201", "date": "2022-05-31" },
                { "count": "180", "date": "2022-05-29" },
                { "count": "175", "date": "2022-05-27" },
                { "count": "162", "date": "2022-05-28" }
            ],
            "琼海市": [
                { "count": "1802", "date": "2022-06-01" },
                { "count": "1619", "date": "2022-05-30" },
                { "count": "1471", "date": "2022-05-31" },
                { "count": "1313", "date": "2022-05-29" },
                { "count": "1106", "date": "2022-05-28" },
                { "count": "891", "date": "2022-05-27" }
            ],
            "陵水黎族自治县": [
                { "count": "2058", "date": "2022-06-01" },
                { "count": "2016", "date": "2022-05-31" },
                { "count": "1918", "date": "2022-05-30" },
                { "count": "1605", "date": "2022-05-29" },
                { "count": "1446", "date": "2022-05-27" },
                { "count": "1373", "date": "2022-05-28" }
            ],
            "澄迈县": [
                { "count": "271", "date": "2022-05-30" },
                { "count": "254", "date": "2022-05-31" },
                { "count": "219", "date": "2022-05-29" },
                { "count": "212", "date": "2022-06-01" },
                { "count": "192", "date": "2022-05-27" },
                { "count": "131", "date": "2022-05-28" }
            ],
            "秀英区": [
                { "count": "262", "date": "2022-05-30" },
                { "count": "261", "date": "2022-05-31" },
                { "count": "253", "date": "2022-06-01" },
                { "count": "184", "date": "2022-05-29" },
                { "count": "168", "date": "2022-05-27" },
                { "count": "137", "date": "2022-05-28" }
            ],
            "美兰区": [
                { "count": "371", "date": "2022-05-31" },
                { "count": "327", "date": "2022-06-01" },
                { "count": "311", "date": "2022-05-30" },
                { "count": "239", "date": "2022-05-29" },
                { "count": "235", "date": "2022-05-27" },
                { "count": "136", "date": "2022-05-28" }
            ],
            "海口市": [
                { "count": "9366", "date": "2022-05-30" },
                { "count": "8707", "date": "2022-05-31" },
                { "count": "8057", "date": "2022-06-01" },
                { "count": "7619", "date": "2022-05-29" },
                { "count": "6948", "date": "2022-05-27" },
                { "count": "5989", "date": "2022-05-28" }
            ],
            "保亭黎族苗族自治县": [
                { "count": "1406", "date": "2022-05-30" },
                { "count": "1258", "date": "2022-05-29" },
                { "count": "1254", "date": "2022-06-01" },
                { "count": "1215", "date": "2022-05-31" },
                { "count": "1123", "date": "2022-05-27" },
                { "count": "770", "date": "2022-05-28" }
            ],
            "定安县": [
                { "count": "125", "date": "2022-05-30" },
                { "count": "125", "date": "2022-06-01" },
                { "count": "117", "date": "2022-05-31" },
                { "count": "107", "date": "2022-05-29" },
                { "count": "90", "date": "2022-05-27" },
                { "count": "60", "date": "2022-05-28" }
            ],
            "五指山市": [
                { "count": "46", "date": "2022-06-01" },
                { "count": "35", "date": "2022-05-29" },
                { "count": "34", "date": "2022-05-30" },
                { "count": "30", "date": "2022-05-31" },
                { "count": "20", "date": "2022-05-28" },
                { "count": "19", "date": "2022-05-27" }
            ],
            "东方市": [
                { "count": "1779", "date": "2022-05-30" },
                { "count": "1724", "date": "2022-05-31" },
                { "count": "1686", "date": "2022-06-01" },
                { "count": "1619", "date": "2022-05-29" },
                { "count": "1541", "date": "2022-05-27" },
                { "count": "1200", "date": "2022-05-28" }
            ],
            "文昌市": [
                { "count": "146", "date": "2022-05-29" },
                { "count": "144", "date": "2022-05-31" },
                { "count": "141", "date": "2022-05-30" },
                { "count": "136", "date": "2022-06-01" },
                { "count": "97", "date": "2022-05-28" },
                { "count": "84", "date": "2022-05-27" }
            ],
            "儋州市": [
                { "count": "476", "date": "2022-05-30" },
                { "count": "469", "date": "2022-05-31" },
                { "count": "406", "date": "2022-06-01" },
                { "count": "370", "date": "2022-05-27" },
                { "count": "366", "date": "2022-05-29" },
                { "count": "335", "date": "2022-05-28" }
            ],
            "万宁市": [
                { "count": "1525", "date": "2022-05-31" },
                { "count": "1483", "date": "2022-05-30" },
                { "count": "1404", "date": "2022-05-29" },
                { "count": "1303", "date": "2022-06-01" },
                { "count": "1091", "date": "2022-05-28" },
                { "count": "1057", "date": "2022-05-27" }
            ],
            "白沙黎族自治县": [
                { "count": "28", "date": "2022-05-30" },
                { "count": "26", "date": "2022-05-29" },
                { "count": "26", "date": "2022-05-31" },
                { "count": "22", "date": "2022-06-01" },
                { "count": "21", "date": "2022-05-28" },
                { "count": "17", "date": "2022-05-27" }
            ],
            "琼山区": [
                { "count": "88", "date": "2022-05-30" },
                { "count": "80", "date": "2022-05-31" },
                { "count": "67", "date": "2022-06-01" },
                { "count": "59", "date": "2022-05-27" },
                { "count": "52", "date": "2022-05-29" },
                { "count": "48", "date": "2022-05-28" }
            ],
            "乐东黎族自治县": [
                { "count": "1675", "date": "2022-05-30" },
                { "count": "1502", "date": "2022-05-31" },
                { "count": "1463", "date": "2022-05-29" },
                { "count": "1380", "date": "2022-06-01" },
                { "count": "1312", "date": "2022-05-27" },
                { "count": "1096", "date": "2022-05-28" }
            ],
            "三亚市": [
                { "count": "10436", "date": "2022-05-30" },
                { "count": "10404", "date": "2022-05-31" },
                { "count": "10013", "date": "2022-06-01" },
                { "count": "9420", "date": "2022-05-29" },
                { "count": "8405", "date": "2022-05-27" },
                { "count": "7970", "date": "2022-05-28" }
            ]
        };*/

        var result4 = ${touristDtoList}
        var trendDescText = "${descTouristTrend}"
        $(document).ready(function(){
            // 四、旅游用户趋势
            var resultKey = [], resultData = [];
            $.each(result4,function(key, item) {
                resultKey.push(key);
                var option="<option value="+key+">"+key+"</option>";
                $("#tourist-area-id").append(option)
            });
            // 取第一个的值
            resultData = resultKey.length>0? result4[resultKey[0]]: [];
            initEcharts(resultData);

            var d2 = document.getElementById('tourist-area-id').value;
            var descTrend = document.getElementById('desc-tourist-trend');
            let maxRes = maxTrendResult(result4[d2])
            let minRes = minTrendResult(result4[d2])
            descTrend.innerText = "上图展示为" + d2 + "的旅游用户变化趋势图，由图可见，" +  maxRes['date'] + "该区域内的旅游用户达到最高峰，" + maxRes['count'] + "人，" + minRes['date'] + "该区域内的旅游用户最低，"+ minRes['count'] +"人。" + trendDescText
        });
        function getOption(xCategory, series, title, legend, color) {
            return {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                },
                color: color? color: ['#4b91ff'],
                legend: {
                    show: legend?true: false,
                    data: legend,
                    icon: 'circle',
                    right: '4%'
                },
                grid: {
                    left: "8%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xCategory,
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            }
        }
        function getSCategory(result, type) {
            var series = [], xCategory = [], data = [];
            $.each(result,function(index,item) {
                if(type===1) {
                    data.push(item.count);
                    xCategory.push(item.date);
                    if(index === (result.length-1)) {
                        series.push({ type: 'line', data: data, areaStyle: {opacity: 0.3} })
                    }
                } else if(type===2) {
                    var obj = { name: '', type: 'line', data: [] };
                    var count = $.map(item.datas, function(n, i){ return n.count; });
                    if(index===0) {
                        xCategory = $.map(item.datas, function(n, i){ return n.date; })
                    }
                    obj.name = item.type;
                    obj.data = count;
                    series.push(obj);
                }
            });
            return {
                series,
                xCategory
            }
        }
        // 旅游用户数量变化趋势
        function initEcharts(datas) {
            var myecharts = echarts.init(document.getElementById("my_echarts4"));
            var series = getSCategory(datas, 1).series;
            var xCategory = getSCategory(datas, 1).xCategory;
            var optionLine = getOption(xCategory, series);
            myecharts.setOption(optionLine);
        }
        function change() {
            var areaId = document.getElementById('tourist-area-id');
            var d1 = areaId.options[areaId.selectedIndex].value;
            var d2 = areaId.value;
            initEcharts(result4[d2])
            var descTrend = document.getElementById('desc-tourist-trend');
            let maxRes = maxTrendResult(result4[d2])
            let minRes = minTrendResult(result4[d2])
            descTrend.innerText = "上图展示为" + d2 + "的旅游用户变化趋势图，由图可见，" +  maxRes['date'] + "该区域内的旅游用户达到最高峰，" + maxRes['count'] + "人，" + minRes['date'] + "该区域内的旅游用户最低，"+ minRes['count'] +"人。" + trendDescText
        }
        function maxTrendResult(res) {
            let max = 0, maxIndex = 0;
            for (let i = 0; i < res.length; i++) {
               if (max < parseInt(res[i]['count'])) {
                   maxIndex = i
                   max = parseInt(res[i]['count'])
               }
            }
            return res[maxIndex];
        }

        function minTrendResult(res) {
            let min = parseInt(res[0]['count']), minIndex = 0;
            for (let i = 1; i < res.length; i++) {
                if (min > parseInt(res[i]['count'])) {
                    minIndex = i
                    min = parseInt(res[i]['count'])
                }
                console.log(res[i]['count'])
            }
            return res[minIndex];
        }
    })()
</script>